{% extends 'base_dashboard.html' %}

{% block title %}Exam session — {{ program.title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm rounded-4 p-4 text-center">
      <div class="display-6 text-primary mb-2"><i class="bi bi-window-fullscreen"></i></div>
      <h4 class="fw-bold">Secure exam session</h4>
      <p class="text-muted mb-3">{{ program.title }}</p>
      <ul class="list-unstyled small text-muted text-start mx-auto mb-4" style="max-width:26rem;">
        <li class="mb-2">• The test opens in a <strong>dedicated window</strong> (one question at a time).</li>
        <li class="mb-2">• After the practice question, the real exam goes <strong>full screen</strong>.</li>
        <li class="mb-2">• Do not switch tabs, leave the window, or exit full screen — your attempt will be <strong>cancelled</strong>.</li>
        <li class="mb-2">• When you finish, results appear here after about <strong>{{ program.results_delay_minutes|default:5 }} minutes</strong>.</li>
      </ul>

      <button type="button" class="btn btn-success btn-lg w-100 fw-semibold" id="open-exam-btn">
        Open exam window
      </button>
      <p class="small text-muted mt-3 mb-0" id="launch-status">
        Allow pop-ups for this site if the window does not open.
      </p>
      <a href="{% url 'certifications:my_certs' %}" class="btn btn-link mt-3">Back to my certifications</a>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  var url = "{{ take_exam_url|escapejs }}";
  var name = "tsn_cert_exam_{{ attempt.pk }}";
  var btn = document.getElementById('open-exam-btn');
  var status = document.getElementById('launch-status');

  function openSession() {
    var w = window.open(url, name, 'noopener=yes,noreferrer=yes');
    if (w) {
      try { w.focus(); } catch (e) {}
      status.textContent = 'Exam window opened. Keep this page — you can check results here after you finish.';
      btn.textContent = 'Re-open exam window';
    } else {
      status.textContent = 'Pop-up blocked. Click the button again after allowing pop-ups, or use the link below.';
      status.innerHTML += ' <a href="' + url + '" target="' + name + '" rel="noopener">Open exam</a>';
    }
  }

  btn.addEventListener('click', openSession);
  // Auto-open once on load
  openSession();
})();
</script>
{% endblock %}